<template>
  <div>
    <PageHeader :lang="lang"></PageHeader>
    <!--资产总览-->
    <div id="pageBody">
      <div class="retaMain">
        <div class="rate_title">
          <h2>{{lang['fee rate statement']}}</h2>
          <p>{{lang['transfer exportation assets']}}</p>
        </div>

        <!-- 转入 -->
        <table class="rate_table">
          <caption>{{lang['change over to']}}</caption>
          <thead>
            <tr>
              <th width="33%">{{lang['currency surname']}}</th>
              <th width="33%">{{lang['transfer minimum limit']}}</th>
              <th width="33%">{{lang['transfer fee']}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in reteList.Deposit">
              <td>
                <span><img :src="currencyImgUrl + item.IconWeb"/></span>{{item.Code}}<font> - {{item.Name}}</font>
              </td>
              <td>{{item.Min || lang['free']}}</td>
              <td v-if="(item.Code !== 'USD') && (item.Code !== 'HKD')">
                <p v-if="item.Type === 1">
                  {{item.MinFee ? (item.MinFee + ' ' + item.Code) : lang['free']}}
                </p>
                <p v-if="item.Type === 2">
                   {{item.Rate ? (item.Rate * 100) + '%' : lang['free']}}
                </p>
              </td>
              <td v-if="item.Code === 'USD' || item.Code === 'HKD'">{{item.Rate * 100}}% ({{lang['minimum fee']}} {{item.Code}} {{item.MinFee}})</td>
            </tr>
          </tbody>
        </table>

        <!-- 转出 -->
        <table class="rate_table">
          <caption>{{lang['roll out']}}</caption>
          <thead>
              <tr>
                <th width="33%">{{lang['currency surname']}}</th>
                <th width="33%">{{lang['turn smallest limit']}}</th>
                <th width="33%">{{lang['turn fees']}}</th>
              </tr>
          </thead>
          <tbody>
            <tr v-for="item in reteList.Withdrawal">
              <td>
                <span><img :src="currencyImgUrl + item.IconWeb"/></span>{{item.Code}}<font> - {{item.Name}}</font>
              </td>
              <td>{{item.Min || lang['free']}}</td>
              <td v-if="(item.Code !== 'USD') && (item.Code !== 'HKD')">
                <p v-if="item.Type === 1">
                  {{item.MinFee ? (item.MinFee + ' ' + item.Code) : lang['free']}}
                </p>
                <p v-if="item.Type === 2">
                   {{item.Rate ? (item.Rate * 100) + '%' : lang['free']}}
                </p>
              </td>
              <td v-if="item.Code === 'USD' || item.Code === 'HKD'">{{item.Rate * 100}}% ({{lang['minimum fee']}} {{item.Code}} {{item.MinFee}})</td>
            </tr>
          </tbody>
        </table>

        <table class="rate_table">
          <caption>{{lang['headerNavTransact']}}</caption>
          <thead>
            <tr>
              <th width="33%">{{lang['currency surname']}}</th>
              <th width="33%">{{lang['pending orders']}}</th>
              <th width="33%">{{lang['eat single']}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{lang['All Pairs']}}</td>
              <td>0.1%</td>
              <td>0.1%</td>
            </tr>
          </tbody>
        </table>

        <table class="rate_table">
          <caption>C2C {{lang['headerNavTransact']}}</caption>
          <thead>
            <tr>
              <th width="33%">{{lang['currency surname']}}</th>
              <th width="33%">{{lang['Order Placer']}}</th>
              <th width="33%">{{lang['Order Taker']}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{lang['All Pairs']}}</td>
              <td>0.25%</td>
              <td>{{lang['free']}}</td>
            </tr>
          </tbody>
        </table>

        <div class="rate_prompt">
          <h3>{{lang['precautions']}}</h3>
          <p>{{lang['interpret schedule']}}</p>
        </div>
      </div>
    </div>
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      reteList: {}

    }
  },
  components: {

  },
  watch: {

  },
  methods: {

  },
  mounted () {
    this.$host2.get('Info/AllRate', {
    }, {
      isDisposeCode: false
    }).then((res) => {
      if (res.StatusCode === '200') {
        this.reteList = res.Data || {}
      }
    })
  }
}
</script>

<style>
.retaMain { width: 1200px; margin: 0 auto;}
.rate_title{
  border-bottom: solid 1px #3B404B;
  padding:0 15px 0 0;
}
.rate_title h2{
  padding: 38px 0 10px;
  font-size: 18px;
  height: 20px;
  color: #fff;
}
.rate_title p{
  padding: 0 0 20px;
  color: #999;
}

.rate_table caption{
  text-align: left;
  padding: 40px 0 20px;
  font-size: 16px;
  color: #fff;
}

.rate_table th,
.rate_table td{
  text-align: center;
  line-height: 48px;
}
.rate_table th{
  border: solid 1px #3B404B;
  color: #fff;
}
.rate_table thead{
  background: #191E2A;
}
.rate_table tbody{
  background: #202832;
}


.rate_table tbody tr td{
  border: solid 1px #3B404B;
  color: #fff;
}
.rate_table tbody tr td span {
  display: inline-block;
  position: relative;
  float: left;
  width: 25px;
  height: 48px;
}
.rate_table tbody tr td img{
  position: absolute;
  top: 50%;
  margin-top: -9px;
  max-width: 18px;
}
.rate_table tr td,
.rate_table tr th {
  padding-left: 50px;
  text-align: left;
}

.rate_table tr td:last-of-type,
.rate_table tr th:last-of-type {
  padding-left: 0;
  padding-right: 50px;
  text-align: right;
}
.rate_table td font{
  font-size: 12px;
  color: #989898;
}

.rate_prompt{
  padding:40px 0 100px;
  line-height: 24px;
}
.rate_prompt h3{
  color: #B23030;
  padding-bottom: 12px;
}
.rate_prompt p{
  color: #a1a1a1;
  line-height: 30px;
}
@media screen and (max-width:1200px){
  .retaMain { width: auto; margin: 0 16px;}
}
</style>
